import React, { useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import request from '../../utils/index'
import ReactECharts from 'echarts-for-react';
type Props = {}

const Index = (props: Props) => {
	const params = useParams()
	const key = params.id
	const [item, setItem] = useState<any>()
	useEffect(() => {
		(async () => {
			const resp = await request({ url: '/api/detail', method: 'post', data: { key } })
			console.log(resp.data);
			setItem(resp.data.data)
		})()
	}, [])
	const options = {
		title: {
			text: 'Stacked Line'
		},
		tooltip: {
			trigger: 'axis'
		},
		legend: {
			data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
		},
		grid: {
			left: '3%',
			right: '4%',
			bottom: '3%',
			containLabel: true
		},
		toolbox: {
			feature: {
				saveAsImage: {}
			}
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
			data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
		yAxis: {
			type: 'value'
		},
		series: [
			{
				name: 'Email',
				type: 'line',
				stack: 'Total',
				data: [120, 132, 101, 134, 90, 230, 210]
			},
			{
				name: 'Union Ads',
				type: 'line',
				stack: 'Total',
				data: [220, 182, 191, 234, 290, 330, 310]
			},
			{
				name: 'Video Ads',
				type: 'line',
				stack: 'Total',
				data: [150, 232, 201, 154, 190, 330, 410]
			},
			{
				name: 'Direct',
				type: 'line',
				stack: 'Total',
				data: [320, 332, 301, 334, 390, 330, 320]
			},
			{
				name: 'Search Engine',
				type: 'line',
				stack: 'Total',
				data: [820, 932, 901, 934, 1290, 1330, 1320]
			}
		]
	};

	return (
		<div>
			{
				item && (
					<div>
						<h3>{item.title}</h3>
						<h3>{item.desc}</h3>
						<h3>{item.price}</h3>
						<div>{ item.detail }</div>

						<div dangerouslySetInnerHTML={{ __html: item.detail }}></div>
						
						{/* <div v-html="item.detail"></div> */}
					</div>
				)
			}

			<ReactECharts option={options} style={{ height: '300px', width: '300px' }}/>
		</div>
	)
}

export default Index